<template>
  <div class="web">
    <a-spin :spinning="loading" size="large">
      <header-bar></header-bar>
      <transition>
        <router-view></router-view>
      </transition>
      <footer-bar></footer-bar>
    </a-spin>
  </div>
</template>

<script>
import { Spin } from "ant-design-vue";
export default {
  name: "index",
  components: {
    ASpin: Spin,
    headerBar: () => import("@/components/commonHeader/index"),
    footerBar: () => import("@/components/commonFooter/index")
  },
  data() {
    return {
      timer: null
    };
  },
  methods: {
    getMesNum() {
      this.$ajax
        .post(this.$api.getMsg, null, true)
        .then(res => {
          this.$store.dispatch("changeReadNum", res.num);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    getInfo() {
      this.getMesNum();
      this.timer = setInterval(() => {
        this.getMesNum();
      }, 10000);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    if (this.checkStatus === "5") {
      this.getInfo();
    }
  },
  computed: {
    loading() {
      return this.$store.state.loading;
    },
    checkStatus() {
      return this.$store.state.checkStatus;
    }
  }
};
</script>

<style scoped>
.web {
  min-width: 1400px;
  overflow: auto;
}
</style>
